<template>
  <div>
    <a-drawer
      width="1100"
      :maskClosable="false"
      :visible="dialogData.show"
      direction="rtl"
      @close="handleClose"
    >
      <div slot="title">
        <!-- <i class="el-icon-arrow-left"></i> -->
        <span>{{dialogData.title}}</span>
      </div>
      
      <el-row style="width:1120px;padding-bottom:150px;height:100%;overflow-y:auto" v-loading="loading">
        <el-col :span="18">
          <el-form
            :model="parames"
            :rules="rules"
            label-position="left"
            ref="parames"
            label-width="94px"
            class="addForm"
            size="small"
          >
            <el-row style="padding: 0 40px">
              <el-col :span="24">
                <a-collapse :defaultActiveKey="activeNames" :bordered="false">
                  <a-collapse-panel class="marginB10" header="基础信息" key="1">
                    <el-row :gutter="40" style="margin-top: 14px">
                      <el-col :span="24">
                        <el-row :gutter="40">
                          <el-col :span="12">
                            <el-form-item label="联系人:" prop="contacts">
                              <el-input size="small" v-model="parames.contacts" placeholder="请输入"></el-input>
                            </el-form-item>
                          </el-col>
                          <el-col :span="12">
                            <el-form-item label="联系电话:" prop="contactNumber">
                              <el-input size="small" v-model="parames.contactNumber" placeholder="请输入"></el-input>
                            </el-form-item>
                          </el-col>
                          <el-col :span="12">
                            <el-form-item label="状态:">
                              <el-select style="width:100%" size="small" filterable v-model="parames.contactStatus" placeholder="请选择">
                                <el-option v-for="(item,index) in rototStatusDate" :key="index" :label="item.desc" :value="item.name"></el-option>
                              </el-select>
                            </el-form-item>
                          </el-col>
                          <el-col :span="24">
                            <el-form-item label="地区:">
                              <el-input size="small" v-model="parames.area" placeholder="请输入"></el-input>
                            </el-form-item>
                          </el-col>
                          <el-col :span="24">
                            <el-form-item label="客户反馈:">
                              <el-input size="small" v-model="parames.feedback" placeholder="请输入"></el-input>
                            </el-form-item>
                          </el-col>
                          <el-col :span="12">
                            <el-form-item label="下次跟进时间:">
                                <el-date-picker
                                style="width:100%"
                                v-model="parames.nextFollowDate"
                                type="date"
                                placeholder="选择日期">
                                </el-date-picker>
                            </el-form-item>
                          </el-col>
                          <el-col :span="12">
                            <el-form-item label="签单时间:">
                                <el-date-picker
                                style="width:100%"
                                v-model="parames.signingDate"
                                type="date"
                                placeholder="选择日期">
                                </el-date-picker>
                            </el-form-item>
                          </el-col>
                        </el-row>
                      </el-col>
                    </el-row>
                  </a-collapse-panel>
                </a-collapse>
              </el-col>
            </el-row>
          </el-form>
        </el-col>
        <el-col :span="5" style="position: fixed;top:80px;right:-10px;width:240px">
          <div class="form-team-box">
            <div v-if="dialogData.type == 'edit'">
              <el-button
                @click="handleCancle"
                size="small"
                icon="el-icon-close"
                style="width:200px;text-align: left;margin-bottom:10px"
              >取消编辑</el-button>
            </div>
          </div>
        </el-col>
      </el-row>

      <div class="from-bottom-box">
        <el-button size="small" type="primary" :loading="loadingBtn" @click="handleSend">保存</el-button>
        <el-button size="small" @click="handleClose">取消</el-button>
      </div>
    </a-drawer>
  </div>
</template>

<script>

export default {
  props: ["dialogData"],
  data() {
    return {
      loading: false,
      loadingBtn: false,
      activeNames: ['1','2','3','4', '5', '6'],
      parames: {
        id: '',
        contacts: '', //联系人
        contactNumber: '', //联系电话
        contactStatus: '', //状态（枚举）
        feedback: '', //客户反馈
        nextFollowDate: '', // 下次跟进时间
        area: '', //地区
        signingDate: '' //签单时间
      },
      rototStatusDate: [], //状态
      rules: {
        contacts: [
          { required: true, message: "必填", trigger: ['blur','change']},
        ],
        contactNumber: [
          { required: true, message: "必填", trigger: ['blur','change']},
        ],
      },
    };
  },
  created() {},
  mounted() {},
  methods: {
    addUser () {
      this.searchData.show = true
    },
    checkRender () {
      this.render()
    },
    handleCancle () { //取消重新编辑
      this.dialogData.show = false
      this.$emit('checkOpen')
    },
    handleFile() { //上传附件
      this.addFileData.title = '上传附件'
      if (this.dialogData.type == 'new') {
        this.addFileData.type = 'new'
      } else if (this.dialogData.type == 'edit') {
        this.addFileData.type = 'saveNew'
        this.addFileData.id = this.dialogData.id
      }
      this.addFileData.show = true
    },
    addFile (value,type,index) { //新建时-上传附件回调
      if (type == 'new') {
        this.parames.customerFileList.push(JSON.parse(value))
      } else if (type == 'newEdit') { //新建时-修改人员信息
        this.parames.customerFileList.splice(index,1,JSON.parse(value))
      }
    },
    handleEditFile (index,row) { //修改添加的附件
      this.addFileData.title = '修改文件信息'
      this.addFileData.index = index
      if (this.dialogData.type == 'new') {
        this.addFileData.type = 'newEdit'
      } else if (this.dialogData.type == 'edit') {
        this.addFileData.type = 'saveEdit'
      }
      this.addFileData.data = JSON.stringify(row)
      this.addFileData.show = true
    },
    handleCanleFile (index,row) { //删除添加的附件
      if (this.dialogData.type == 'new') {
        this.parames.customerFileList.splice(index,1)
      } else if (this.dialogData.type == 'edit') {
        this.$post(this.$api.postCustomerFileDel,{
          customerFileId: row.id
        }).then(response => {
          if (response.data.succeed) {
            this.render()
          }
        })
      }
    },
    handleClose() {//关闭弹窗
      this.dialogData.show = false;
    },
    handleSend () { //提交信息
      this.$refs['parames'].validate((valid) => {
        if (valid) {
          this.loadingBtn = true
          if (this.dialogData.type == 'edit') { //修改保存成功=
            this.$post(this.$api.postEcEdit,this.parames).then(response => {
              if (response.data.succeed) {
                setTimeout(() => {
                  this.$message({ type:'success',message: '修改成功'})
                  this.handleClose()
                  this.$emit('checkOpen','1') //重新打开父级弹窗
                }, 200);
              }
            })
          } else { //新增
            this.$post(this.$api.postEcAdd,this.parames).then(response => {
              if (response.data.succeed) {
                this.$message({ type:'success',message: '保存成功'})
                this.$emit('checkRender')
                this.handleClose()
              }
            })
          }
          setTimeout(() => {
            this.loadingBtn = false
          }, 300);
        }
      })
    },
    render () { //获取详情信息
      this.loading = true
      this.$post(this.$api.postEcFind,{
        robotId: this.dialogData.id
      }).then(response => {
        if (response.data.succeed) {
          this.activeNames = ['1','2']
          let data = response.data.data
          this.parames.id = data.id
          this.parames.contacts = data.contacts
          this.parames.contactNumber = data.contactNumber
          this.parames.feedback = data.feedback
          this.parames.nextFollowDate = data.nextFollowDate
          this.parames.area = data.area
          this.parames.signingDate = data.signingDate
          if (data.contactStatus) {
            this.parames.contactStatus = data.contactStatus.name //企业邮箱
          }
          setTimeout(() => {
            this.loading = false
          }, 200);
        }
      })
    },
    resetData () { //重置数据
      this.activeNames = ['1','2']
      this.parames.id = ''
      this.parames.contacts = "" 
      this.parames.contactNumber = ""
      this.parames.feedback = ""
      this.parames.nextFollowDate = ''
      this.parames.area = ''
      this.parames.contactStatus = ''
      this.$refs.parames.resetFields()
    },
  },
  components: {
  },
  computed: {
      changeDialog () {
        return this.dialogData.show
      }
    }, 
    watch: {
      changeDialog: {
        handler (curVal, oldVal) {
          if (curVal) {
            this.$utils.getEnumberation('postEcRobotContactStatus','rototStatusDate',this) //状态
            if (this.dialogData.type == 'edit') {
              this.render()
            }
          } else {
            this.resetData()
          }
        }
      }
    },
};
</script>

<style scoped>
</style>
